<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>Title</title>
</head>

<body>
<span id="sp"><font  color="#ffb6c1">孙雨雨</font> </span>

<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>

姓名：<input type="text" name="username" value="张三"/><br>
<button type="button" id="show1">显示</button>
<button type="button" id="hide1">隐藏</button>
<button type="button" id="delete">删除</button>
<a href="http://www.baidu.com">跳转到百度</a>

<script type="text/javascript">
    $(function () {
        //alert("这是jquery的hello wrod!");
        //通过id获取元素
        // alert($("#sp").text());
        //标签元素选择器
        // alert($("span").text());
        //隐藏所有p标签的元素
        $("p").hide();

        //当鼠标单击button按钮的时候触发这个方法
        $("#show1").click(function () {
            //显示所有p标签元素
            $("p").show();
        });

        //当鼠标单击hide1这个元素的时候，触发这个方法
        $("#hide1").click(function () {
            $("p").hide();
        });
        //获取表单元素的value值
        alert($("[name='username']").val());

        //获取p标签中的文本内容
        alert($("p").text());

        //获取p标签的html整个元素
        $("#sp").html("<font color='#6fff00'>中国</font>");

        //更改a标签中href属性的内容
        $("a").attr("href","http://www.jd.com");
        $("a").text("跳转到京东");


        //姓名输入框的内容改变事件
        $("[name='username']").change(function () {
alert("姓名发生了改变");
        });

        //显示
        $("#show1").click(function () {
            //淡入,慢慢的显示出来
            $("p").fadeIn("show");
        });

        //隐藏
        $("#hide1").click(function () {
            //淡出，慢慢的隐藏
            $("p").fadeOut("show");
        });

        //点击删除按钮，删除span
        $("#delete").click(function () {
            $("#sp").remove();
        });

    })
</script>
</body>
</html>